<template>
  <view class="container">
    <view class="head">
      <input-search
        v-model="dataForm.title"
        @focus="onFocus"
        @blur="onBlur"
        :autoFocus="true"
        @confirm="onConfirm"
        confirm-type="search"
        placeholder="搜索课程、分类"
        @input="onInput"
      ></input-search>
    </view>

    <view class="tip-box" v-if="showHot">
      <view class="title">热门搜索</view>
      <view class="tags">
        <view
          class="tag"
          v-for="(tag, tagIndex) in hots"
          :key="tagIndex"
          @click="onClickTag(tag, tagIndex)"
          >{{ tag.title }}</view
        >
      </view>
    </view>
    <view class="data-list" v-if="!showHot && dataList.length">
      <!-- type="other" -->
      <view
        class="item"
        v-for="(item, index) in dataList"
        :key="item.id"
        @click="onClick(item, index)"
      >
        <article-item
          :read="item.read_num"
          :thumb="item.cover_img_url"
          :title="item.title"
          :tags="item.tags"
        >
        </article-item>
      </view>
    </view>
    <view class="no-data" v-if="!showHot && !dataList.length">
      <no-data> </no-data>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
import noData from "@/components/public/noData/noData";
import inputSearch from "@/components/public/input/search";
import articleItem from "@/components/public/item/article";
import { getHotSearchList } from "@/common/api/college";
import { stringToJSON } from "@/utils";

export default {
  mixins: [viewModule],
  components: {
    inputSearch,
    noData,
    articleItem,
  },
  data() {
    return {
      imgBaseUrlV2,
      mixinViewOptions: {
        getURL: "/getCollegeCourseArticleList",
        isPage: true,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: true,
        pullDown: false,
      },
      hots: [],
      dataInfo: {},
      showHot: true,
      dataForm: {
        title: "",
      },
      dataList: [],
    };
  },
  methods: {
    fetchComplete(err, data = [], res) {
      if (err) {
        this.message.error(res.message || "获取详情失败,请稍后重试!");
        return;
      }
      data.forEach((i, idx) => {
        i.tags = [];
        if (i.course_info) {
          let tag = i.course_info.tag || "";
          let tagArr = tag.split(",");
          i.tags = tagArr.map((i) =>
            this.$getDictLabel("repositoryArticleTag", i)
          );
        }
      });
      return data;
    },
    onInput() {
      this.dataForm.course_id = "";
      this.dataForm.article_id = "";
      delete this.dataForm.course_id;
      delete this.dataForm.article_id;
      this.dataForm.search_type = 0;
    },
    onFocus() {
      this.showHot = true;
    },
    onBlur() {
      console.log("blur");
      setTimeout(() => {
        this.showHot = false;
      }, 120);
    },
    onClickTag(tag) {
      this.dataForm.title = tag.title;
      this.dataForm.course_id = tag.course_id || "";
      this.dataForm.article_id = tag.article_id || "";
      this.dataForm.search_type = 1;
      this.getDataList();
      this.showHot = false;
    },
    onConfirm() {
      this.$nextTick(() => {
        this.getDataList();
        this.showHot = false;
      });
    },
    onClick(item, index) {
      this.$Router.push({
        path: "/pages/college/course/index",
        query: {
          ...item,
        },
      });
    },
    getHotSearchList() {
      return getHotSearchList()
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return;
          }

          let list = res.data.data || [];
          this.hots = list;
        })
        .catch((err) => {});
    },
  },
  onLoad(q) {
    this.getHotSearchList();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/base';
@import '~@/common/stylus/mixins';

.container {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  padding-top: 154rpx;

  >.head {
    position: fixed;
    z-index: 3;
    width: 100%;
    left: 0;
    top: calc(var(--window-top));
    padding: 29rpx 0 30rpx;
    background: #0D1523;
    box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.12);
  }
}

.tip-box {
  >.title {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: color-white;
    line-height: 1;
    padding: 0 24rpx;
    margin-bottom: 10rpx;
  }

  >.tags {
    display: flex;
    flex-wrap: wrap;
    padding: 0 24rpx 0 4rpx;

    >.tag {
      height: 60rpx;
      line-height: 56rpx;
      font-size: 28rpx;
      color: color-white;
      border-radius: 32rpx;
      border: 1rpx solid #EEEEEE;
      padding: 0 30rpx;
      no-wrap();
      margin-left: 20rpx;
      margin-top: 20rpx;
    }
  }
}

.no-data {
  position: relative;
  height: calc(100vh - var(--window-top) - 160rpx);
}

.data-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 24rpx;

  >.item {
    flex: 0 0 340rpx;
    // height: 372rpx;
    margin-bottom: 10rpx;
    margin-right: 22rpx;
    background: #3F5270;
    margin-bottom: 24rpx;
    padding-bottom: 24rpx;

    &:nth-child(2n) {
      margin-right: 0;
    }
  }
}
</style>